<template>
  <div id="app">
    <router-view />
    <Fireworks v-if="clickEffects === 'fireworks'" />
    <Waves v-if="clickEffects === 'waves'" />
  </div>
</template>

<script>
import { getConfigKey } from "@/api/system/config"
import Waves from "@/views/ClickEffects/waves.vue"
import Fireworks from "@/views/ClickEffects/fireworks.vue"

export default {
  name: "App",
  components: {
    Waves,
    Fireworks,
  },
  data() {
    return {
      clickEffects: "fireworks",
    }
  },
  created() {
    getConfigKey("clickEffects").then((res) => {
      this.clickEffects = res.msg
    })
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      },
    }
  },
}
</script>
